@charset "UTf-8";

@import "common/_reset";
@import "common/_common";
@mixin text_overflow_m {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
body {
    //  &:target #bg{
    //      left: -5000px;
    //  }
    &:hover #bg {
        left: -9999px;
    }
    #bg {
        background: url(../img/background/foreground.png), url(../img/background/midground.png), url("../img/background/background.png");
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3150px;
        transition: left 300s linear;
        vertical-align: baseline;
    }
    .warp {
        width: 90%;
        //              min-width: 50%;
        height: auto;
        margin: 0 auto;
        //             background-color:white;
        opacity: 0.95;
        padding: 20px 50px 0;

        header {
            width: 100%;
            vertical-align: middle;
            position: relative;
            .header_bg {
                background-color: gray;
                opacity: 0.4;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            .officia_icon {
                height: 80px;
                float: left;

            }
            .pang_menu {
                float: right;
                ul {

                    li {
                        float: left;
                        margin-left: 60px;
                        &:nth-of-type(5) {
                            a:hover {
                                color: #0099FF;
                                box-shadow: none !important;
                            }
                        }
                        .iconfont {
                            color: white;
                            font-size: 40px;
                            &:hover {
                                color: #0099FF;
                            }
                        }

                        a {
                            font-size: 33px;
                            color: white;
                            display: block;
                            padding: 10px;
                            text-align: center;
                            width: 152px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            opacity: 0.95;
                            -webkit-transition: -webkit-box-shadow 0.5s ease-out;
                            &:hover {

                                box-shadow: 0 0 15px #0099ff;
                            }

                            span {
                                font-size: 20px;
                                margin-top: 7px;
                                color: #838383;
                                display: block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
            .pang_weixin {
                float: right;
                width: 50px;
                margin-left: 60px;

            }
        }
        nav {
            width: 100%;
            height: 632px;
            background-color: #222222;
            position: relative;
            overflow: hidden;

            ul {

                margin-top: 457px;
                &:nth-of-type(1) {
                    float: left;
                    margin-left: 45px;
                }
                &:nth-of-type(2) {
                    float: right;
                    margin-right: 65px;
                }
                li {
                    overflow: hidden;
                    float: left;
                    width: 100px;
                    height: 100px;
                    border-radius: 50px;
                    border: 5px solid #A3DFE9;
                    margin-left: 20px;

                }
            }
            .homepage_gameipone {
                float: left;
                width: 255px;
                overflow: hidden;
                margin-top: 55px;
                margin-left: 155px;

            }
            .hand {
                position: absolute;
                top: 0;
                left: 350px;
                overflow: hidden;
                a {
                    color: white;
                    &:hover {
                        color: black;
                    }
                    span {
                        width: 68px;
                        font-size: 17px;
                        display: block;
                        position: absolute;
                        top: 240px;
                        left: 135px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .text {
                position: absolute;
                top: 100px;
                left: 1000px;
                overflow: hidden;
                dl {
                    width: 280px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    dd {
                        &:nth-of-type(1) {
                            color: #14BBAD;
                            font-size: 28.5px;
                        }
                        &:nth-of-type(2) {
                            color: #14BBAD;
                            font-size: 31px;
                        }
                        &:nth-of-type(3) {
                            color: #A0A0A0;
                            font-size: 20px;
                            margin-top: 20px;
                        }
                        &:nth-of-type(4) {
                            color: #A0A0A0;
                            font-size: 20px;
                        }
                    }
                }
                .text_link {
                    width: 140px;
                    height: 50px;
                    margin-top: 23px;
                    background-color: #14BBAD;
                    border-radius: 25px;
                    a {
                        display: block;
                        border-radius: 25px;
                        color: white;
                        -webkit-transition: -webkit-box-shadow 0.5s ease-out;
                        &:hover {
                            color: black;
                            box-shadow: 0 0 15px #0099ff;

                        }
                        span {

                            font-size: 18px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: block;
                            line-height: 50px;
                            vertical-align: middle;
                            text-align: center;
                        }
                    }
                }
            }

        }
        section {
            width: 100%;
            height: 2400px;
            position: relative;
            overflow: hidden;
            .section_bg {
                background-color: gray;
                opacity: 0.4;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
            }
            .pic {
                img:nth-of-type(1) {
                    position: absolute;
                    top: 0;
                    left: 100px;
                }
                img:nth-of-type(2) {
                    position: absolute;
                    right: 100px;
                    top: 200px;
                }
                img:nth-of-type(3) {
                    position: absolute;
                    right: -8px;
                    top: 900px;
                }
                img:nth-of-type(4) {
                    position: absolute;
                    top: 580px;
                    left: 0;
                }
                img:nth-of-type(5) {
                    position: absolute;
                    top: 1300px;
                    left: 90px;
                }
                img:nth-of-type(6) {
                    position: absolute;
                    top: 1275px;
                    left: 200px;
                }
                img:nth-of-type(7) {
                    position: absolute;
                    top: 1650px;
                    right: 100px;
                }

            }
            ul:nth-of-type(1) {
                width: 1000px;
                margin: 0 auto;
                overflow: hidden;
                white-space: nowrap;
                li {

                    float: left;
                    height: 210px;
                    overflow: hidden;
                    line-height: 210px;
                    vertical-align: middle;

                    margin-left: 150px;
                    &:nth-of-type(3) {
                        img {
                            margin-top: 40px;
                        }
                    }
                    img {
                        vertical-align: middle;

                    }

                }
            }
            ul:nth-of-type(2) {
                width: 1000px;
                margin: 0 auto;
                line-height: 50px;
                overflow: hidden;
                li {
                    float: left;
                    margin-left: 150px;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 22px;
                    &:nth-of-type(2) {
                        margin-left: 140px;
                    }
                    &:nth-of-type(3) {
                        margin-left: 135px;
                    }
                    span {
                        text-align: center;
                        display: block;
                        font-size: 14px;
                        color: #939597;
                    }
                }
            }
            .game_text {
                margin: 70px 0 0 450px;
                dl {
                    dd:nth-of-type(1) {
                        display: inline-block;
                        font-size: 35px;
                    }
                    dd:nth-of-type(2) {
                        display: inline-block;
                        font-size: 12px;
                        color: #a7a7a7;
                    }
                    dd:nth-of-type(3) {
                        font-size: 18px;
                    }
                }
            }
            ul:nth-of-type(3) {
                margin: 20px 0 0 380px;
                li {
                    overflow: hidden;
                    float: left;
                    margin-right: 25px;
                    .game_show {
                        width: 298px;
                        height: 445px;
                        background-color: #EAEAEA;
                        border-radius: 10px;
                        dl {
                            float: left;
                            width: 150px;
                            margin: 17px 0 0 21px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            dd:nth-of-type(1) {
                                font-size: 24px;
                            }
                            dd:nth-of-type(2) {
                                font-size: 14px;
                            }
                            dd:nth-of-type(3) {
                                font-size: 12px;
                            }
                            dd:nth-of-type(4) {
                                font-size: 12px;
                            }
                        }
                        .game_pay {
                            float: right;
                            margin: 17px 21px 0 0;
                            text-align: right;
                            .iconfont {
                                font-size: 25px;
                                display: block;
                                margin-top: 10px;
                                margin-right: 20px;
                            }
                            .pay {
                                width: 70px;
                                height: 30px;
                                background-color: #14BBAD;
                                border-radius: 25px;
                                a {
                                    display: block;
                                    color: white;
                                    border-radius: 25px;
                                    -webkit-transition: -webkit-box-shadow 0.5s ease-out;
                                    &:hover {
                                        color: black;
                                        box-shadow: 0 0 15px #0099ff;

                                    }
                                    span {
                                        display: block;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        text-align: center;
                                        vertical-align: middle;
                                        line-height: 30px;
                                    }

                                }
                            }
                            .game_pic {
                                a {
                                    img {
                                        display: block;
                                        border-radius: 25px;
                                    }
                                }
                            }

                        }
                    }

                }
            }
            ul:nth-of-type(4) {
                margin: 20px 0 0 380px;
                li {
                    overflow: hidden;
                    float: left;
                    margin-right: 25px;
                    .game_show {
                        width: 298px;
                        height: 445px;
                        background-color: #EAEAEA;
                        border-radius: 10px;
                        dl {
                            float: left;
                            width: 150px;
                            margin: 17px 0 0 21px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            dd:nth-of-type(1) {
                                font-size: 24px;
                            }
                            dd:nth-of-type(2) {
                                font-size: 14px;
                            }
                            dd:nth-of-type(3) {
                                font-size: 12px;
                            }
                            dd:nth-of-type(4) {
                                font-size: 12px;
                            }
                        }
                        .game_pay {
                            float: right;
                            margin: 17px 21px 0 0;
                            text-align: right;
                            .iconfont {
                                font-size: 25px;
                                display: block;
                                margin-top: 10px;
                                margin-right: 20px;
                            }
                            .pay {
                                width: 70px;
                                height: 30px;
                                background-color: #14BBAD;
                                border-radius: 25px;
                                a {
                                    display: block;
                                    color: white;
                                    border-radius: 25px;
                                    -webkit-transition: -webkit-box-shadow 0.5s ease-out;
                                    &:hover {
                                        color: black;
                                        box-shadow: 0 0 15px #0099ff;

                                    }
                                    span {
                                        display: block;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        text-align: center;
                                        vertical-align: middle;
                                        line-height: 30px;
                                    }

                                }
                            }
                            .game_pic {
                                a {
                                    img {
                                        display: block;
                                        border-radius: 25px;
                                    }
                                }
                            }

                        }
                    }

                }
            }
            ul:nth-of-type(5) {
                width: 964px;
                margin-left: 380px;
                margin-top: 40px;
                li {
                    float: left;
                    margin-right: 25px;
                    margin-top: 25px;
                    .game_case {
                        width: 457px;
                        height: 174px;
                        background-color: #A0A0A0;
                        .tupiao {
                            float: left;
                            .tupiao_one {
                                width: 56px;
                                height: 59px;
                                overflow: hidden;
                                img {
                                    height: 59px;
                                }
                            }
                            .tupiao_two {
                                width: 56px;
                                height: 59px;
                                font-size: 30px;
                                text-align: center;
                                background-color: #EFD736;
                                span {
                                    display: block;
                                    font-size: 14px;
                                }
                            }
                            .tupiao_three {
                                width: 56px;
                                height: 59px;
                                text-align: center;
                                line-height: 59px;
                                vertical-align: middle;
                                background-color: #363942;
                                .iconfont {
                                    font-size: 25px;
                                    color: white;
                                }
                            }
                        }
                        dl {
                            float: left;
                            font-size: 12px;
                            margin-left: 23px;
                            margin-top: 20px;
                            dd:nth-of-type(1) {
                                font-size: 16px;
                                text-align: right;
                            }
                            dd:nth-of-type(2) {
                                color: #7c7c7c;
                                text-align: right;
                                margin-top: 20px;
                            }
                            dd:nth-of-type(3) {
                                color: #7c7c7c;
                                text-align: right;
                            }
                            dd:nth-of-type(4) {
                                color: #7c7c7c;
                                text-align: right;
                            }
                            dd:nth-of-type(5) {
                                color: #7c7c7c;
                                text-align: right;
                            }
                        }
                        .game_case_pic {
                            float: right;
                            width: 158px;
                            height: 174px;
                            overflow: hidden;
                            text-align: center;
                            img {
                                height: 174px;

                            }
                        }
                    }
                }
            }
            footer {
                .foot {
                    width: 100%;
                    height: 80px;
                    background-color: #09cdd0;
                    margin-top: 225px;
                    position: relative;
                    color: white;
                    font-size: 12px;
                    text-align: center;
                    line-height: 80px;
                    vertical-align: middle;
                    img:nth-of-type(1) {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                    }
                    img:nth-of-type(2) {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }
                }
            }

        }

    }
}
